<template>
  <div class="bigBox">
    <div class="left">
      <div class="top" ref="leftTop">
        <span class="title">近一周降雨量</span>
      </div>
      <div class="bottom" ref="leftBottom"></div>
    </div>
    <div class="center" id="floodMap">
      <myMap />
      <el-table :data="data" style="width: 90%; margin: 0 auto">
        <el-table-column label="预警信息" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="danger">{{ scope.row.name }}</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <div class="top" ref="rightTop"></div>
      <div class="bottom" ref="rightBottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-gl' //3D地图插件
import { onMounted, ref } from 'vue'

import myMap from './components/Map.vue'

const data = ref([
  {
    name: '特大暴雨将于3/15日凌晨5点在张家界市落下，请有关人员撤离',
  },
])

const leftTop = ref<HTMLElement>()
const leftBottom = ref<HTMLElement>()
const rightTop = ref<HTMLElement>()
const rightBottom = ref<HTMLElement>()

const cacheCom = new Map<string, HTMLDivElement>()
const initMap = async () => {
  const myChart1 = echarts.init(leftTop.value!)
  const option1 = {
    title: {
      text: '近一周降雨量分析',
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    color: ['#2f89cf'],
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', () => {
    myChart1.resize()
  })

  const myChart2 = echarts.init(leftBottom.value!)
  const option2 = {
    title: {
      text: '往年降雨量分析',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top',
        },
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  }

  myChart2.setOption(option2)
  window.addEventListener('resize', () => {
    myChart2.resize()
  })

  const myChart3 = echarts.init(rightTop.value!)
  const option3 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: '大模型预测降雨量',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['Line 1'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, 232, 101, 264, 90, 340, 250],
      },
    ],
  }

  myChart3.setOption(option3)
  window.addEventListener('resize', () => {
    myChart3.resize()
  })

  const myChart4 = echarts.init(rightBottom.value!)
  const option4 = {
    title: {
      text: '模型预测与实际降雨量对比',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  }

  myChart4.setOption(option4)
  window.addEventListener('resize', () => {
    myChart4.resize()
  })
}
onMounted(() => {
  // 初始化地图
  initMap()
})
</script>

<style scoped lang="scss">
.bigBox {
  box-sizing: border-box;
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  padding: 20px;
  display: flex;
  justify-content: space-between;

  .title {
    color: $primary-color;
    font-weight: bold;
  }

  .left,
  .right {
    width: 420px;
    height: 100%;

    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;

    .top,
    .bottom {
      border: 1px solid $primary-border-color;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 20px;
    }
  }

  .center {
    flex: 1;
    height: 300px;
    width: 300px;
  }
}
</style>
